<template>	
    <view id="zuiti">
		<view id="tou">
			<view class="lunbo_kuai">
		
		<swiper class="lunbo" 
		indicator-dots="true" 
		indicator-color="rgba(0, 0, 0, 0.1)" 
		indicator-active-color="rgba(0,0,0,0.5)" 
		circular="true"
		autoplay="true">
			<swiper-item>
				<view>
				<image src="../../static/collection-image/冲锋衣.jpeg"></image>
				</view>
			</swiper-item>
				
			<swiper-item>
				<view>
				<image src="../../static/collection-image/冲锋衣.jpeg"></image>
				</view>
			</swiper-item>
			
			<swiper-item>
				<view>
				<image src="../../static/collection-image/冲锋衣.jpeg"></image>
				</view>
			</swiper-item>
			
			<swiper-item>
				<view>
				<image src="../../static/collection-image/冲锋衣.jpeg"></image>
				</view>
			</swiper-item>
			
			<swiper-item>
				<view>
				<image src="../../static/collection-image/冲锋衣.jpeg"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>

      <view class="jiage">
		<view>￥239</view>
		<view>价格￥799</view>
		<view>*使用10公里徒步里程可减100元，到手价为139</view>
		<view>冲锋衣潮流热款</view>
	</view>
	
	<view class="yunfei">
		<view>快递：8.00</view>
		<view>已售：888</view>
		<view>发货：苏州</view>
	</view>

    <view class="fuwu">
		<view>服务</view>
		<view style="display: flex;">
			<view>
				<view class="fuwu_ziti">
					<icon type="success" size="20rpx"></icon>
				<text class=".iconfont .icon-liwuhuodong">满100包邮</text>
				</view>
				<view class="fuwu_ziti">
					<icon type="success" size="20rpx"></icon>
				<text>新用户首单免费</text>
				</view>
				
			</view>
			<view>
				<view class="fuwu_ziti">
					<icon type="success" size="20rpx"></icon>
				<text>正品保证</text>
				</view>
				<view class="fuwu_ziti">
					<icon type="success" size="20rpx"></icon>
				<text>7天无理由退货</text>
				</view>
				
			</view>
		</view>
	</view>

    <view class="canshu">
		<view>参数</view>
		<view class="xiangqing">
			<view>
				<text>上市时间</text>
				<text>2017年秋季</text>
			</view>
			<view>
				<text>使用对象</text>
				<text>街溜子</text>
			</view>
			<view>
				<text>商品系列</text>
				<text>城市户外</text>
			</view>
			<view>
				<text>商品材质</text>
				<text>塑料</text>
			</view>
			<view>
				<text>适用季节</text>
				<text>秋季</text>
			</view>
		</view>
	</view>

    <view class="sp_xiangqing">
		<view>详情</view>
		<view class="wz_tp">
			<text>文字描述</text>
			<image src="../../static/collection-image/冲锋衣.jpeg"></image>
		</view>
	</view>
	
		</view>
		
		<view class="zanwei">
			
		</view>
		
		<view id="foout">
	       <view>
	           <view class="chaozuo">
				   <view>
					   <uni-icons custom-prefix="iconfont" type="icon-kefu" size="30"></uni-icons>   
					   <uni-icons custom-prefix="iconfont" type="icon-wodeshoucang" size="30"></uni-icons>
				   </view>
				   
				   
			      <view 
				  v-for="(item,index) in xuanxiang"
				  :class="{bianse: no_xuan === index}"
				  v-on:click="btnClick(index)"
				  >
				  {{item}}</view>
			      
	          </view>
           </view>
		</view>
		
		<view>
				<button @click="open">打开弹窗</button>
				<uni-popup ref="popup" type="bottom" background-color="#fff" :mask-click="false">底部弹出 Popup</uni-popup>
		</view>
	
	
</view>
	

</template>

<script>
	export default {
		data() {
			return {
				xuanxiang:['加入购物车','立即购买'],
				no_xuan:0
				
			}
		},
		methods: {
			queqing(){
				console.log('确定');
			},
			
			jiaru(){
				console.log('加入');	
			},
			
			btnClick(index){
				console.log(this.no_xuan);
				this.no_xuan=index;
				if(index==0){
					this.queqing()
				}else if(index==1){
					this.jiaru()
				}
			},
			
			 open(){
			        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			        this.$refs.popup.open('top')
					console.log(this.$refs.popup.open)
			      }
			
			
		}
	}
</script>

<style lang="less" scoped>	


@import url('~@/static/fonts/iconfont.css');
@import url('~@/static/spxq/iconfont.css');
	
#zuiti{
	display: flex;
	flex-direction: column;
}
	


.lunbo{
	width: 750rpx;
}
swiper-item{
	width: 750rpx;
}

swiper-item image{
	width: 750rpx;
}

.jiage{
	margin: 10rpx;
}

.jiage view{
	margin-top: 10rpx;
}

.jiage :first-child{
	color: red;
	font-size: 50rpx;
}

.jiage :nth-child(2){
	text-decoration: line-through rgba(0,0,0,0.3);
	color: rgba(0,0,0,0.5);
	font-size: 30rpx;
}

.jiage :nth-child(3){
	font-size: 10rpx;
	color: red;
}

.yunfei{
	margin-top: 40rpx;
	padding: 10rpx 0;
	background-color: rgba(0,0,0,0.1);
	display: flex;
	justify-content: space-between;
}

.yunfei view{
	font-size: 30rpx;
	color: rgba(0,0,0,0.3);
}

.fuwu{
	display: flex;
	margin-top: 20rpx;
}

.fuwu view{
	margin: 0 10rpx;
}

.fuwu_ziti text {
	font-size: 30rpx;
}

.canshu{
	padding: 20rpx 10rpx;
	background-color: rgba(0,0,0,0.1);
}

.canshu view view{
	margin: 10rpx 0;
}

.xiangqing{
	font-size: 25rpx;
}

.xiangqing view text:nth-child(1){
	color: rgba(0,0,0,0.4);
	margin-right: 100rpx;
}

.sp_xiangqing{
	padding: 10rpx;
}

.wz_tp{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.wz_tp text{
	font-size: 20rpx;
}
.wz_tp image{
	width: 750rpx;
}

.chaozuo{	
	height: 100rpx;
	line-height: 100rpx;
	display: flex;
	position: fixed;
	bottom: 0;
	width: 750rpx;
	background-color: white;
	justify-content: flex-end;
}	

.chaozuo view{
	background-color: rgba(0,0,0,0.3);
}

.chaozuo :first-child{
	flex: 6;
	background-color: white;
}

.chaozuo :first-child>uni-icons{
	flex: 3;
}

.zanwei{
	width: 750rpx;
	height: 150rpx;
}

.bianse{
	background-color: red !important;
}

</style>
